<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Dynamic Table</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>

    <!-- 公共头   -->
    <div th:replace="comment :: header "></div>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="comment :: #left"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="comment :: #head-start">
            <div/>

            <!--开关按钮开始-->
            <a class="toggle-btn">
                <i class="fa fa-bars"></i>
            </a>
            <!--开关按钮结束-->

            <!--搜索开始-->
            <form class="searchform"
                  action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html"
                  method="post">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
            </form>
            <!--搜索结束-->

            <!--通知菜单开始 -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-tasks"></i>
                            <span class="badge">8</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">你有八个未解决的问题</h5>
                            <ul class="dropdown-list user-list">
                                <li class="new">
                                    <a href="#">
                                        <div class="task-info">
                                            <div>数据库更新</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 40%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" role="progressbar"
                                                 class="progress-bar progress-bar-warning">
                                                <span class="">40%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="#">
                                        <div class="task-info">
                                            <div>test2</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="90" role="progressbar"
                                                 class="progress-bar progress-bar-success">
                                                <span class="">90%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>test2</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 66%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="66" role="progressbar"
                                                 class="progress-bar progress-bar-info">
                                                <span class="">66%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>test2</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 33%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="33" role="progressbar"
                                                 class="progress-bar progress-bar-danger">
                                                <span class="">33%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>test2</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 80%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="80" role="progressbar" class="progress-bar">
                                                <span class="">80%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">看到所有未解决任务</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">你有5封邮件</h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user1.png" alt=""/>
                                            </span>
                                        <span class="desc">
                                                <span class="name">
                                                    管理员
                                                    <span class="badge badge-success">new</span>
                                                </span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user2.png" alt=""/>
                                            </span>
                                        <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user3.png" alt=""/>
                                            </span>
                                        <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user4.png" alt=""/>
                                            </span>
                                        <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user5.png" alt=""/>
                                            </span>
                                        <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">阅读所有的邮件</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge">4</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">通知</h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                        <span class="name">服务器# 1超载.</span> <em class="small">34 mins</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                        <span class="name">服务器# 1超载.</span> <em class="small">1 hrs</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                        <span class="name">服务器# 1超载.</span>
                                        <em class="small">4 hrs</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                        <span class="name">服务器# 1超载.</span>
                                        <em class="small">4 hrs</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">看到所有的通知</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt=""/>
                            管理员
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li>
                                <a href="#">
                                    <i class="fa fa-user"></i>
                                    用户信息
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-sign-out"></i>
                                    登出
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--通知菜单结束 --> </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Dynamic Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Tables</a>
                </li>
                <li class="active"> Dynamic Table</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Dynamic Table
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
                            </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table">
                                <table class="display table table-bordered table-striped" id="dynamic-table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>id</th>
                                        <th>name</th>
                                        <th>age</th>
                                        <th>email</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="gradeX" th:each="user,status : ${userpage.records}">
                                        <td th:text="${status.count}">count</td>
                                        <td th:text="${user.id}">id</td>
                                        <td th:text="${user.name}">name</td>
                                        <td th:text="${user.age}">age</td>
                                        <td>[[${user.email}]]</td>
                                        <td>
                                            <a th:href="@{/dynamic_table/delete/{id}(id=${user.id},pn=${userpage.current})}"
                                               class="btn btn-danger btn-sm" type="button">删除</a>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="dataTables_info" id="dynamic-table_info">当前页第
                                            [[${userpage.current}]] 页，
                                            共 [[${userpage.pages}]] 页，总记录数 [[${userpage.total}]]条
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="dataTables_paginate paging_bootstrap pagination">
                                            <ul>
                                                <li class="prev disabled"
                                                    th:class="${userpage.hasPrevious()?'':'prev disabled'}"><a th:href="@{/dynamic_table(pn=${
                                                userpage.current}-1)}">← 前一页</a></li>
                                                <li th:class="${num == userpage.current?'active':''}"
                                                    th:each="num:${#numbers.sequence(1,userpage.pages)}">
                                                    <a th:href="@{/dynamic_table(pn=${num})}">[[${num}]]</a>
                                                </li>
                                                <li class="next"
                                                    th:class="${userpage.hasNext()?'next':'next disabled'}"><a
                                                        th:href="@{/dynamic_table(pn=${userpage.current}+1)}">后一页 → </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <!--body wrapper end-->

            <!--footer section start-->
            <footer>
                2014 &copy; AdminEx by ThemeBucket
            </footer>
            <!--footer section end-->
        </div>
        <!-- main content end-->
    </div>
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="comment :: commentscript"></div>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<!--<script src="js/dynamic_table_init.js"></script>-->


</body>
</html>
